import React, { Component } from 'react'
import { Icon, Drawer } from 'antd';
import './cart.scss'

export default class index extends Component {
    constructor() {
        super()
        this.state = {
            visible: false,
            width: '',
            flag: true,
            carList: []
        }
    }
    render() {
        return (
            <div className="cart">
                <div className="backg">
                    <ul>
                        {/* 账号 */}
                        <li>
                            <div className="user common">
                                <Icon type="user" />
                                <p>账号</p>
                                <div className="boxx right_box">
                                    <div className="top">
                                        <div className="imgbox">

                                        </div>
                                        <p><span>130*****...,</span>您好</p>
                                    </div>
                                    <div className="bott">
                                        <div className="left fl">
                                            <Icon type="profile" />
                                            <p>我的订单</p>
                                        </div>
                                        <div className="right fl">
                                            <Icon type="pay-circle" />
                                            <p>我的唯品币</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="block"></div>
                        </li>
                        {/* 购物袋 */}
                        <li onClick={this.Drawer}>
                            <div className="shopping_bag  common">
                                <Icon type="shopping" />
                                <p>购物袋</p>
                                <span>
                                    
                            </span>
                            </div>
                        </li>

                        {/* 优惠券 */}
                        <li>
                            <div className="iconbox">
                                <Icon type="shake" />
                            </div>
                            <div className="right_box">
                                我的优惠券
                        </div>

                        </li>
                        {/* 品牌收藏 */}
                        <li>
                            <div className="iconbox">
                                <Icon type="heart" />
                            </div>
                            <div className="right_box">
                                品牌收藏
                        </div>
                        </li>
                        {/* 商品收藏 */}
                        <li>
                            <div className="iconbox">
                                <Icon type="star" />
                            </div>
                            <div className="right_box">
                                商品收藏
                        </div>
                        </li>
                        {/* 我的足迹 */}
                        <li>
                            <div className="iconbox">
                                <Icon type="history" />
                            </div>
                            <div className="right_box">
                                我的足迹
                        </div>
                        </li>
                    </ul>
                    <ul className="button">
                        <li>
                            <div className="iconbox">
                                <Icon type="edit" />
                            </div>
                            <div className="right_box">
                                反馈
                        </div>
                        </li>
                        <li>
                            <div className="iconbox" onClick={this.handelGoToUp}>
                                <Icon type="up" />
                            </div>
                            <div className="right_box">
                                回到顶部
                        </div>
                        </li>
                    </ul>
                    <Drawer
                        className="drawer"
                        title="我的购物车"
                        placement="right"
                        closable={false}
                        onClose={this.onClose}
                        visible={this.state.visible}
                        getContainer={false}
                        style={{ position: 'absolute', height: "100%", width: this.state.width }}
                        zIndex='-99999999'
                        width="350px"
                        maskStyle={{ background: "rgba(211, 211, 211, 0)" }}
                    >
                        {
                            this.state.carList.map(item => {
                                return <div className="line" key={item.pro_id}>
                                    <div className="imgbox fl">
                                        <img src={item.pro_img} alt="" />
                                    </div>
                                    <div className="size_box fl">
                                        <p className="title">{item.pro_title}</p>
                                        <p className="size">M</p>
                                    </div>
                                    <div className="price_box fl">
                                        <span className="num">{item.count}</span>
                                        <span className="price">{item.pro_vip_price}</span>
                                    </div>
                                </div>
                            })
                        }

                    </Drawer>
                </div>
            </div>
        )
    }
    componentDidMount() {
        this.clickState()
        document.body.addEventListener('click',()=>{
            this.clickState()
            console.log(222)
        })
    }

    // 点击更新state数据

    clickState(){
        var storage = window.localStorage;
        this.setState({
            carList:JSON.parse(storage.getItem('cart'))
        })
    }

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    }


    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    Drawer = () => {
        if (this.state.visible) {
            this.onClose()
        } else {
            this.showDrawer()
        }
    }

    handelGoToUp() {
        window.scrollTo({
            left: 0,
            top: 0,
            behavior: 'smooth'
        }, 0)
    }
}
